/**
 * Tabs 标签页
 */
(function () {
    /**
     * 标签页实现
     * @param {*} tabRoot 
     */
    function onTabs(tabRoot) {
        let tabs = document.querySelector(tabRoot).firstElementChild; // 选项根容器
        let liArray = tabs.getElementsByTagName('li'); // 所有选项标签
        let olliArray = tabs.nextElementSibling.getElementsByTagName('li'); // 所有容器选项

        // 直接操作每个选项事件
        for (let index = 0; index < liArray.length; index++) {
            const element = liArray[index];
            element.addEventListener('click', function () {
                //移除所有选项指定样式
                for (let index = 0; index < liArray.length; index++) {
                    liArray[index].classList.remove('y-active');//选项标签样式
                    olliArray[index].classList.remove('y-on'); //容器样式
                }
                //添加选中样式
                this.classList.add('y-active');
                olliArray[index].classList.add('y-on');
            })
        }
    }

    onTabs('#userManager');
    onTabs('#modelManger');
})()
